<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mutable Bunnies</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="theme-color" content="#7f345b">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon"/>
    <link rel="manifest" href="manifest.json">

    <script src="script/eventbus.js"></script>
    <script src="script/application.js"></script>
    <script type="module">
        import './ui/app-view.js';
    </script>

    <style>
        @font-face {
            font-family: Roboto Bold;
            src: url("fonts/static/RobotoSlab-Bold.ttf") format("ttf");
        }

        body {
            background-color: #212121;
            color: #fff;
            margin: 0;
            font-family: 'Roboto', 'Noto', sans-serif;
            -webkit-font-smoothing: antialiased;
            width: 100%;
            height: 100%;
            padding: 0;
        }

        app-view {
            display: none;
        }

        body::-webkit-scrollbar {
            width: 0.4em;
        }

        body::-webkit-scrollbar-track {
            background-color: #00000000;
        }

        body::-webkit-scrollbar-thumb {
            background-color: #646464;
        }

        ::-webkit-scrollbar {
            width: 6px;
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--accent-color);
            opacity: 0.76;
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
    </style>
    <script>
        function send_message_to_sw(msg) {
            return new Promise((resolve, reject) => {
                let channel = new MessageChannel();

                channel.port1.onmessage = (event) => {
                    if (event.data.error) {
                        reject(event.data.error);
                    } else {
                        resolve(event.data);
                    }
                };
                if (navigator.serviceWorker.controller) {
                    navigator.serviceWorker.controller.postMessage(msg, [channel.port2]);
                } else {
                    // failed to retrieve controller, assume online.
                    resolve({
                        offline: false
                    });
                }
            });
        }

        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/service_worker.js')
                    .then((registration) => {
                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
                    }, (err) => {
                        console.log('ServiceWorker registration failed: ', err);
                    });
            });

            navigator.serviceWorker.ready.then(() => {
                send_message_to_sw("is offline?").then(event => {
                    application.offline = event.offline;
                    console.log(`offline=${application.offline}`);
                    application.publish('offline', application.offline);

                    if (application.offline) {
                        application.view("offline-view");
                    }
                });
            });
        }

        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            window.pwa = e;
            application.publish('installed', !window.pwa);
        });

        window.isPWA = (window.matchMedia('(display-mode: fullscreen)').matches)
            || (window.matchMedia('(display-mode: standalone)').matches);

        application.onAuthentication(() => {
            if (window.isPWA) {
                document.documentElement.requestFullscreen()
                    .catch((e) => {
                        console.log(e);
                    });
            }
        });
    </script>
</head>
<body>


<app-view></app-view>

</body>
<script>
    Promise.all(
        ['app-view']
            .map(name => customElements.whenDefined(name)),
    ).then(() => {
        document.querySelector('app-view').style.display = 'block';
    });
</script>
</html>